<template>
    <h2>调拨添加</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form.addDto" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <table style="width: 100%; border: 1px solid #ccc">
            <tr>
                <td colspan="3" style="background-color: grey">
                    <h3 style="color: aliceblue">基本信息</h3>
                    <hr />
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="单据主题" prop="vendorId">
                        <el-input v-model="form.addDto.aName" style="width: 300px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="单据编号" prop="vendorId">
                        <el-input v-model="form.addDto.aNumber" placeholder="保存后自动生成" style="width: 300px"
                            :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="调拨日期" required>
                        <el-col :span="11">
                            <el-form-item prop="4">
                                <el-date-picker v-model="form.addDto.aDate" type="date" aria-label="Pick a date"
                                    placeholder="Pick a date" style="width: 500px" />
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="库管人员" prop="vendorId">
                        <el-input v-model="form.addDto.aWarehousePersonnel" style="width: 300px" placeholder="双击选择库管人员"
                            @dblclick="dialogVisible2 = true; GetSectorList()" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="调出仓库" prop="vendorId">
                        <el-input v-model="form.addDto.aGoWarehouse" placeholder="双击选择仓库" style="width: 300px"
                            @dblclick="dialogVisibleckchu = true" />
                    </el-form-item>
                </td>
                <td></td>
            </tr>
        </table>
        <br />
        <div style="height: 50px;">
            <el-button round @click="addhang()">新增行</el-button>
        </div>

        <!-- 产品表格 -->
        <table border="1" style="border-collapse: collapse; width: 1000px; height: 40px;">
            <thead>
                <tr>
                    <th><input type="checkbox" style="width: 30px;" />
                    </th>
                    <th style="height: 40px;">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>现有库存</th>
                    <th>调拨数量</th>
                    <th>调出仓库</th>
                    <th>调入仓库</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in check" :key="index">
                    <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                    <td>
                        <input v-model="item.pName" type="text" placeholder="双击选择产品"
                            style="height: 40px; width: 150px;text-align: center;" @dblclick="dialogVisible = true" />
                    </td>
                    <td>
                        <input v-model="item.pNumber" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pSpec" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pUnit" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.spConfirmNum" type="text"
                            style="height: 40px; width: 150px;text-align: center;" @change="sumRPNum"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.apAllocateNum" type="text"
                            style="height: 40px; width: 150px;text-align: center;" />
                    </td>
                    <td>
                        <input v-model="item.wName" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="form.apInboundWarehousename" type="text" placeholder="双击选择仓库"
                            style="height: 40px; width: 150px;text-align: center;" @dblclick="dialogVisibleck = true" />
                    </td>
                </tr>
            </tbody>
        </table>
        &nbsp;

        <!-- 产品名称弹框 -->
        <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="storageNumber" label="入库编号" align="center" />
                    <el-table-column prop="wName" label="仓库" align="center" />
                    <el-table-column prop="storageTopic" label="主题" align="center" />
                    <el-table-column prop="pName" label="产品" align="center" />

                </el-table>
                <el-button type="primary" @click="dialogVisible = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 我方代表弹框 -->
        <el-dialog v-model="dialogVisible2" title="我方代表" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                            default-expand-all="true" @node-click="handleNodeClick2" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange2">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" align="center" />
                            <el-table-column prop="mName" label="姓名" align="center" />
                            <el-table-column prop="sectorName" label="部门" align="center" />
                            <el-table-column prop="postName" label="岗位" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible2 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 调出仓库弹框 -->
        <el-dialog v-model="dialogVisibleckchu" title="调出仓库" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-table :data="WarehouseLists" style="width: 100%" @selection-change="handleSelectionChangeckchu">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" align="center" />
                    <el-table-column prop="wName" label="仓库名称" align="center" />
                    <el-table-column prop="wNumber" label="仓库编号" align="center" />
                    <el-table-column prop="wAddress" label="仓库地址" align="center" />
                </el-table>
                <el-button type="primary" @click="dialogVisibleckchu = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 调出仓库弹框 -->
        <el-dialog v-model="dialogVisibleck" title="调出仓库" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-table :data="WarehouseList" style="width: 100%" @selection-change="handleSelectionChange3">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" align="center" />
                    <el-table-column prop="wName" label="仓库名称" align="center" />
                    <el-table-column prop="wNumber" label="仓库编号" align="center" />
                    <el-table-column prop="wAddress" label="仓库地址" align="center" />
                </el-table>
                <el-button type="primary" @click="dialogVisibleck = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, reactive, computed } from "vue";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const locationOptions = ["Home", "Company", "School"];
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import http from '../../../http.js'
const dialogVisible = ref(false)
const dialogVisibleck = ref(false)
const dialogVisibleckchu = ref(false)
const dialogVisible2 = ref(false)
const route = useRoute();
const router = useRouter();
const form = reactive({
    apInboundWarehousename: '',
    "addDto": {
        "aName": "",
        "aDate": "",
        "aNumber": "",
        "aWarehousePersonnel": "",
        "warehouseId":"",
        "aGoWarehouse": "",
        "aState": 1,
        "addName": "",
        "addTime": "",
        "office_Id": "",
        "user_Id": "",
        "adddto": [
            {
                //"allocationProductsId": "",
                "aNumber": "",
                "apAllocateNum": "",
                "apInboundWarehouse": "",
                "pNumber": "",
                "pName": "",
                "pSpec": "",
                "pUnit": "",
                "wName": ""
            }
        ]
    }
})
const ids = ref([])
//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({
        pName: '',//产品名称
        pNumber: "",//产品编号
        pSpec: "",//产品规格
        pUnit: "",//产品单位
        spConfirmNum: '',//现有库存
        wName: "",//调出仓库
        apInboundWarehouse: "",//调入仓库
        apAllocateNum: ""
    });
}
onMounted(() => {
    GetManpowerList();
    //getVendorType();
    ProductList();
    wareGetShowTime();
    wareGetShowTimes();
})
//#region  我方代表
//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})
//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})
//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}
//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}
//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}
//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    form.addDto.aWarehousePersonnel = check2.value[0].mName
    form.addDto.aGoWarehouse = check2.value[0].wName
    console.log(check2.value)
}
//#endregion
//#region  产品名称弹框
//显示供应商中的供应商类别树形
const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb+'/erpck/api/Allocate/ListWarehouseSApps')
        .then(res => {
            productlist.value = res.data.data
            console.log(res.data.data)
            console.log(productlist.value)
        })
}
//选中的产品名称
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(val)
    console.log(check.value[0].pName)
}
//#endregion

//#region  仓库
//查询条件
const wareforms = reactive({
    WNumber: '',
    WName: '',
    WType: '',
    PageIndex: 1,
    PageSize: 10
})
//分页
const warePages = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})
const WarehouseLists = ref([])
//显示
const wareGetShowTimes = () => {
    axios.get(http.zblnb + '/erpck/api/Warehouse/ShowWarehouse', {
        params: {
            WNumber: wareforms.WNumber,
            WName: wareforms.WName,
            WType: wareforms.WType,
            PageIndex: warePages.value.PageIndex,
            PageSize: warePages.value.PageSize
        }
    }).then((res) => {
        WarehouseLists.value = res.data.data.list
        warePages.value.listcount = res.data.data.listcount
        warePages.value.pagecount = res.data.data.pagecount
        console.log(WarehouseLists.value)
    })
}
//多选框
const check4 = ref([])
const handleSelectionChangeckchu = (val: User[]) => {
    check4.value = val
    form.addDto.aGoWarehouse = check4.value[0].wName
    form.addDto.warehouseId=check4.value[0].warehouseId
    console.log(check4.value)
}
//#endregion



//#region  仓库
//查询条件
const wareform = reactive({
    WNumber: '',
    WName: '',
    WType: '',
    PageIndex: 1,
    PageSize: 10
})
//分页
const warePage = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})
const WarehouseList = ref([])
//显示
const wareGetShowTime = () => {
    axios.get(http.zblnb + '/erpck/api/Warehouse/ShowWarehouse', {
        params: {
            WNumber: wareform.WNumber,
            WName: wareform.WName,
            WType: wareform.WType,
            PageIndex: warePage.value.PageIndex,
            PageSize: warePage.value.PageSize
        }
    }).then((res) => {
        WarehouseList.value = res.data.data.list
        warePage.value.listcount = res.data.data.listcount
        warePage.value.pagecount = res.data.data.pagecount
        console.log(WarehouseList.value)
    })
}
//多选框
const check3 = ref([])
const handleSelectionChange3 = (val: User[]) => {
    check3.value = val
    form.apInboundWarehousename = check3.value[0].wName
    
}
//#endregion
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check.value.filter(item => item.storageProductId);
    }
    console.log(selectedRows.value)
}
//添加采购合同
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(check.value)
            form.addDto.aName = form.addDto.aName,
                form.addDto.aNumber = "040211",
                form.addDto.aDate = form.addDto.aDate,
                form.addDto.aWarehousePersonnel = form.addDto.aWarehousePersonnel,
                form.addDto.aGoWarehouse = form.addDto.aGoWarehouse,
                form.addDto.aState = form.addDto.aState,
                form.addDto.addName = '王思雨',
                form.addDto.addTime = '2024-01-02',
                form.addDto.office_Id = '1',
                form.addDto.user_Id = '2',
                form.addDto.adddto=selectedRows.value.map(item=>({
                        apAllocateNum: item.apAllocateNum,
                        apInboundWarehouse: form.apInboundWarehousename,
                        pNumber: item.pNumber,
                        pName: item.pName,
                        pSpec: item.pSpec,
                        pUnit: item.pUnit,
                        wName: item.wName,
                        spConfirmNum: item.spConfirmNum
                    }))
            form.addDto.adddto = form.addDto.adddto.filter((item) => item.spConfirmNum != '')
            console.log(form.addDto)
            if (check.value.length < 1) {
                ElMessage.error('请选择产品');
                return;
            }
            else {
                console.log(form.addDto)
                axios.post(http.zblnb+'/erpck/api/Allocate/AllocateAdd', {
                    addDto: form.addDto
                })
                    .then(res => {
                        console.log(res.data)
                        if (res.data.data > 0) {
                            ElMessage.success('添加成功');
                            router.push('/ShowAllocate');
                        }
                        else {
                            ElMessage.error('添加失败');
                        }
                    })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

//取消
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    router.push('/ShowAllocate')
}
</script>